```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code 中文配置指南 | AI 辅助编程工具</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f9fafb;
            color: #1f2937;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
        }
        .code-block {
            background-color: #1e293b;
            border-left: 4px solid #6366f1;
        }
        .step-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .step-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .api-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-weight: 500;
            font-size: 0.75rem;
        }
        .dropdown-content {
            display: none;
            transition: all 0.3s ease;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .first-letter::first-letter {
            font-size: 3.5rem;
            line-height: 1;
            float: left;
            margin-right: 0.5rem;
            margin-top: 0.25rem;
            color: #6366f1;
            font-weight: 700;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <div class="hero-gradient text-white">
        <div class="container mx-auto px-6 py-24">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">Claude Code 中文配置指南</h1>
                <p class="text-xl md:text-2xl mb-8 leading-relaxed">使用国产大模型搭建高效的 AI 辅助编程环境</p>
                <div class="flex justify-center space-x-4">
                    <a href="#installation" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-indigo-50 transition duration-300">
                        <i class="fas fa-download mr-2"></i>快速开始
                    </a>
                    <a href="#apis" class="bg-indigo-700 text-white px-6 py-3 rounded-full font-medium hover:bg-indigo-800 transition duration-300">
                        <i class="fas fa-key mr-2"></i>API 配置
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container mx-auto px-6 py-16 max-w-4xl">
        <!-- Introduction -->
        <section class="mb-20">
            <div class="flex items-center mb-6">
                <div class="w-2 h-10 bg-indigo-500 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">关于 Claude Code</h2>
            </div>
            <p class="text-lg leading-relaxed mb-6 first-letter">
                Claude Code 是一个基于 Anthropic Claude 模型的代码编辑工具，类似于 Cursor 或 VS Code 的 AI 扩展。它允许开发者使用 AI 辅助编写代码，提高开发效率。本指南将详细介绍如何配置 Claude Code 使用国产大模型（如 Deepseek、智谱 GLM 4.5 或 Kimi/Moonshot）作为后端 API，避免依赖国外服务。
            </p>
            <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r mb-6">
                <div class="flex">
                    <div class="flex-shrink-0 text-blue-500">
                        <i class="fas fa-info-circle text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-blue-800 font-medium">为什么选择国产大模型？</p>
                        <p class="text-blue-700">国产大模型具有本地化优势，响应速度快，符合数据安全法规，且提供中文支持更优。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Installation Section -->
        <section id="installation" class="mb-20">
            <div class="flex items-center mb-6">
                <div class="w-2 h-10 bg-indigo-500 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">第一步：安装 Node.js 18+ 版本</h2>
            </div>
            <p class="text-lg leading-relaxed mb-8">Claude Code 依赖 Node.js 运行。首先，确保您的电脑安装了 Node.js 18 或更高版本。</p>
            
            <div class="grid md:grid-cols-3 gap-6 mb-12">
                <div class="step-card bg-white p-6 rounded-xl">
                    <div class="text-indigo-500 mb-4">
                        <i class="fas fa-download text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">下载和安装 Node.js</h3>
                    <p class="text-gray-600 mb-4">访问 Node.js 官网下载并安装 LTS（长期支持）版本（推荐 18.x 或更高）。</p>
                    <a href="https://nodejs.org" target="_blank" class="text-indigo-600 font-medium inline-flex items-center hover:text-indigo-800">
                        访问官网 <i class="fas fa-external-link-alt ml-1 text-sm"></i>
                    </a>
                </div>
                
                <div class="step-card bg-white p-6 rounded-xl">
                    <div class="text-indigo-500 mb-4">
                        <i class="fas fa-check-circle text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">验证安装</h3>
                    <p class="text-gray-600 mb-4">在终端输入以下命令验证安装是否成功：</p>
                    <div class="code-block text-gray-200 p-4 rounded-lg text-sm font-mono">
                        node -v
                    </div>
                </div>
                
                <div class="step-card bg-white p-6 rounded-xl">
                    <div class="text-indigo-500 mb-4">
                        <i class="fas fa-terminal text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">安装 Claude Code</h3>
                    <p class="text-gray-600 mb-4">全局安装 Claude Code CLI 工具：</p>
                    <div class="code-block text-gray-200 p-4 rounded-lg text-sm font-mono">
                        npm install -g @anthropic-ai/claude-code
                    </div>
                </div>
            </div>
            
            <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded-r">
                <div class="flex">
                    <div class="flex-shrink-0 text-yellow-500">
                        <i class="fas fa-exclamation-triangle text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-yellow-800 font-medium">权限问题解决</p>
                        <p class="text-yellow-700">如果安装过程中遇到权限问题（如 EACCES 错误），在 macOS/Linux 上可添加 <code class="bg-yellow-100 px-1 rounded">sudo</code> 前缀（例如 <code class="bg-yellow-100 px-1 rounded">sudo npm install -g @anthropic-ai/claude-code</code>），并输入密码。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- API Configuration Section -->
        <section id="apis" class="mb-20">
            <div class="flex items-center mb-6">
                <div class="w-2 h-10 bg-indigo-500 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">第二步：设置国产大模型 API</h2>
            </div>
            <p class="text-lg leading-relaxed mb-6">Claude Code 默认使用 Anthropic 的 API，但我们可以通过环境变量重定向到国产大模型的兼容接口。</p>
            
            <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r mb-8">
                <div class="flex">
                    <div class="flex-shrink-0 text-blue-500">
                        <i class="fas fa-lightbulb text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-blue-800 font-medium">API 概念简述</p>
                        <p class="text-blue-700"><strong>API（Application Programming Interface）</strong>：软件间通信的桥梁，用于调用大模型生成代码建议。<br>
                        <strong>环境变量</strong>：系统级配置，用于存储敏感信息（如 API Key），程序启动时可读取。</p>
                    </div>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-6 font-serif">选择国产模型配置</h3>
                
                <!-- API Selection Tabs -->
                <div class="flex overflow-x-auto mb-6 border-b border-gray-200">
                    <button class="px-4 py-2 font-medium text-sm border-b-2 border-indigo-500 text-indigo-600" onclick="showApiTab('deepseek')">
                        Deepseek
                    </button>
                    <button class="px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700" onclick="showApiTab('glm')">
                        智谱 GLM 4.5
                    </button>
                    <button class="px-4 py-2 font-medium text-sm text-gray-500 hover:text-gray-700" onclick="showApiTab('kimi')">
                        Kimi (Moonshot)
                    </button>
                </div>
                
                <!-- Deepseek Tab -->
                <div id="deepseek-tab" class="api-tab">
                    <div class="flex items-center mb-4">
                        <span class="api-badge bg-purple-100 text-purple-800 mr-2">推荐</span>
                        <h4 class="text-xl font-bold">Deepseek 配置</h4>
                    </div>
                    <p class="text-gray-600 mb-6">Deepseek 是一个高效的国产大模型，支持代码生成。</p>
                    
                    <div class="grid md:grid-cols-2 gap-6 mb-6">
                        <div class="bg-white p-6 rounded-lg">
                            <h5 class="font-bold mb-3 flex items-center">
                                <i class="fas fa-key text-purple-500 mr-2"></i> 获取 API Key
                            </h5>
                            <p class="text-gray-600 mb-4">访问 Deepseek 平台生成 API Key（通常以 <code class="bg-gray-100 px-1 rounded">sk-</code> 开头）。</p>
                            <a href="https://platform.deepseek.com/api_keys" target="_blank" class="text-purple-600 font-medium inline-flex items-center hover:text-purple-800">
                                访问 Deepseek 控制台 <i class="fas fa-external-link-alt ml-1 text-sm"></i>
                            </a>
                        </div>
                        <div class="bg-white p-6 rounded-lg">
                            <h5 class="font-bold mb-3 flex items-center">
                                <i class="fas fa-terminal text-purple-500 mr-2"></i> 临时环境变量设置
                            </h5>
                            <div class="code-block text-gray-200 p-4 rounded-lg text-sm font-mono mb-2">
                                export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic<br>
                                export ANTHROPIC_AUTH_TOKEN="替换为您的API Key"<br>
                                export ANTHROPIC_MODEL=deepseek-chat<br>
                                export ANTHROPIC_SMALL_FAST_MODEL=deepseek-chat
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg mb-6">
                        <h5 class="font-bold mb-3 flex items-center">
                            <i class="fas fa-cog text-purple-500 mr-2"></i> 永久环境变量设置 (macOS 示例)
                        </h5>
                        <div class="code-block text-gray-200 p-4 rounded-lg text-sm font-mono">
                            echo '<br>
                            export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic<br>
                            export ANTHROPIC_AUTH_TOKEN="替换为您的API Key"<br>
                            export ANTHROPIC_MODEL=deepseek-chat<br>
                            export ANTHROPIC_SMALL_FAST_MODEL=deepseek-chat' >> ~/.zshrc && source ~/.zshrc
                        </div>
                        <p class="text-gray-500 text-sm mt-2">Windows 用户可使用 PowerShell 设置或通过系统设置 > 环境变量手动添加。</p>
                    </div>
                </div>
                
                <!-- GLM Tab -->
                <div id="glm-tab" class="api-tab hidden">
                    <div class="flex items-center mb-4">
                        <h4 class="text-xl font-bold">智谱 GLM 4.5 配置</h4>
                    </div>
                    <p class="text-gray-600 mb-6">智谱 GLM 是一个强大的国产多模态模型，适合代码和多语言任务。</p>
                    
                    <div class="grid md:grid-cols-2 gap-6 mb-6">
                        <div class="bg-white p-6 rounded-lg">
                            <h5 class="font-bold mb-3 flex items-center">
                                <i class="fas fa-key text-blue-500 mr-2"></i> 获取 API Key
                            </h5>
                            <p class="text-gray-600 mb-4">访问智谱平台生成 API Key。</p>
                            <a href="https://bigmodel.cn/usercenter/proj-mgmt/apikeys" target="_blank" class="text-blue-600 font-medium inline-flex items-center hover:text-blue-800">
                                访问智谱控制台 <i class="fas fa-external-link-alt ml-1 text-sm"></i>
                            </a>
                        </div>
                        <div class="bg-white p-6 rounded-lg">
                            <h5 class="font-bold mb-3 flex items-center">
                                <i class="fas fa-terminal text-blue-500 mr-2"></i> 临时环境变量设置
                            </h5>
                            <div class="code-block text-gray-200 p-4 rounded-lg text-sm font-mono">
                                export ANTHROPIC_BASE_URL=https://open.bigmodel.cn/api/anthropic<br>
                                export ANTHROPIC_AUTH_TOKEN="替换为您的API Key"
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h5 class="font-bold mb-3 flex items-center">
                            <i class="fas fa-cog text-blue-500 mr-2"></i> 永久环境变量设置 (macOS 示例)
                        </h5>
                        <div class="code-block text-gray-200 p-4 rounded-lg text-sm font-mono">
                            echo '<br>
                            export ANTHROPIC_BASE_URL=https://open.bigmodel.cn/api/anthropic<br>
                            export ANTHROPIC_AUTH_TOKEN="替换为您的API Key"' >> ~/.zshrc && source ~/.zshrc
                        </div>
                    </div>
                </div>
                
                <!-- Kimi Tab -->
                <div id="kimi-tab" class="api-tab hidden">
                    <div class="flex items-center mb-4">
                        <h4 class="text-xl font-bold">Kimi (Moonshot) K2 配置</h4>
                    </div>
                    <p class="text-gray-600 mb-6">Kimi 是 Moonshot AI 的模型，专注于高效推理和代码生成。</p>
                    
                    <div class="grid md:grid-cols-2 gap-6 mb-6">
                        <div class="bg-white p-6 rounded-lg">
                            <h5 class="font-bold mb-3 flex items-center">
                                <i class="fas fa-key text-pink-500 mr-2"></i> 获取 API Key
                            </h5>
                            <p class="text-gray-600 mb-4">访问 Moonshot 平台生成 API Key。</p>
                            <a href="https://platform.moonshot.cn/console/api-keys" target="_blank" class="text-pink-600 font-medium inline-flex items-center hover:text-pink-800">
                                访问 Moonshot 控制台 <i class="fas fa-external-link-alt ml-1 text-sm"></i>
                            </a>
                        </div>
                        <div class="bg-white p-6 rounded-lg">
                            <h5 class="font-bold mb-3 flex items-center">
                                <i class="fas fa-terminal text-pink-500 mr-2"></i> 临时环境变量设置
                            </h5>
                            <div class="code-block text-gray-200 p-4 rounded-lg text-sm font-mono">
                                export ANTHROPIC_BASE_URL="https://api.moonshot.cn/anthropic/"<br>
                                export ANTHROPIC_API_KEY="替换为您的API Key"
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h5 class="font-bold mb-3 flex items-center">
                            <i class="fas fa-cog text-pink-500 mr-2"></i> 永久环境变量设置 (macOS 示例)
                        </h5>
                        <div class="code-block text-gray-200 p-4 rounded-lg text-sm font-mono">
                            echo '<br>
                            export ANTHROPIC_BASE_URL="https://api.moonshot.cn/anthropic/"<br>
                            export ANTHROPIC_API_KEY="替换为您的API Key"' >> ~/.zshrc && source ~/.zshrc
                        </div>
                        <p class="text-gray-500 text-sm mt-2">注意这里使用 <code class="bg-gray-100 px-1 rounded">ANTHROPIC_API_KEY</code> 而非 <code class="bg-gray-100 px-1 rounded">ANTHROPIC_AUTH_TOKEN</code>，这是 Moonshot 的特定要求。</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-r">
                <div class="flex">
                    <div class="flex-shrink-0 text-green-500">
                        <i class="fas fa-check-circle text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-green-800 font-medium">配置验证</p>
                        <p class="text-green-700">测试配置是否生效：在终端输入 <code class="bg-green-100 px-1 rounded">echo $ANTHROPIC_BASE_URL</code>，应显示设置的值。API Key 是敏感信息，不要分享。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Launch Section -->
        <section class="mb-20">
            <div class="flex items-center mb-6">
                <div class="w-2 h-10 bg-indigo-500 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">第三步：启动 Claude Code</h2>
            </div>
            <p class="text-lg leading-relaxed mb-8">配置完成后，即可启动 Claude Code。</p>
            
            <div class="grid md:grid-cols-2 gap-6 mb-8">
                <div class="bg-white p-6 rounded-xl">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-play text-indigo-500 mr-2"></i> 基本启动
                    </h3>
                    <p class="text-gray-600 mb-4">在终端输入以下命令启动 Claude Code 的交互模式：</p>
                    <div class="code-block text-gray-200 p-4 rounded-lg text-sm font-mono mb-4">
                        claude
                    </div>
                    <p class="text-gray-600">这将使用您配置的国产模型作为后端。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-bolt text-yellow-500 mr-2"></i> 高级启动
                    </h3>
                    <p class="text-gray-600 mb-4">如果您信任模型并希望跳过权限确认：</p>
                    <div class="code-block text-gray-200 p-4 rounded-lg text-sm font-mono mb-4">
                        claude --dangerously-skip-permissions
                    </div>
                    <div class="bg-red-50 border-l-4 border-red-500 p-3 rounded-r">
                        <p class="text-red-700 font-medium flex items-center">
                            <i class="fas fa-exclamation-triangle mr-2"></i> 警告
                        </p>
                        <p class="text-red-600 text-sm">此模式允许 AI 自动执行代码，存在潜在风险（如恶意代码），仅在安全环境中使用。</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-6 rounded-xl">
                <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i> 启动后操作
                </h3>
                <p class="text-gray-600">Claude Code 会监听您的代码编辑器（需集成），或通过 CLI 交互生成代码。您可以开始使用 AI 辅助编程功能了！</p>
            </div>
        </section>

        <!-- Tips Section -->
        <section class="mb-12">
            <div class="flex items-center mb-6">
                <div class="w-2 h-10 bg-indigo-500 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">第四步：小技巧与优化</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white p-6 rounded-xl">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-magic text-purple-500 mr-2"></i> 使用 /init 命令
                    </h3>
                    <p class="text-gray-600 mb-4">在 Claude Code 交互中输入 <code class="bg-gray-100 px-1 rounded">/init</code>，它会创建一个名为 <code class="bg-gray-100 px-1 rounded">CLAUDE.md</code> 的文件。</p>
                    <p class="text-gray-600">在此文件中写入编程规范、提示词或重要记忆（如项目规则），类似于 Cursor 的 Rules 功能。每个项目文件夹都可以创建一个独立的 <code class="bg-gray-100 px-1 rounded">CLAUDE.md</code>，让 AI 生成代码更符合您的风格和需求。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-bug text-red-500 mr-2"></i> 常见问题排查
                    </h3>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2 text-sm"></i>
                            <span><strong>命令未找到</strong>：确保 Node.js bin 路径在环境变量中（重启终端）。</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2 text-sm"></i>
                            <span><strong>API 错误</strong>：验证 URL 和 Key 无误；检查网络连接。</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2 text-sm"></i>
                            <span><strong>Windows 特殊</strong>：使用 PowerShell 时，环境变量用 <code class="bg-gray-100 px-1 rounded">$env:ANTHROPIC_BASE_URL = "value"</code> 设置。</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Data Visualization -->
        <section class="mb-16">
            <div class="bg-white p-6 rounded-xl">
                <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fas fa-project-diagram text-indigo-500 mr-2"></i> Claude Code 工作流程
                </h3>
                <div class="mermaid">
                    graph TD
                        A[开发者输入代码/问题] --> B[Claude Code CLI]
                        B --> C{API 配置}
                        C -->|Deepseek| D[Deepseek API]
                        C -->|智谱 GLM| E[智谱 API]
                        C -->|Kimi| F[Moonshot API]
                        D --> G[生成代码建议]
                        E --> G
                        F --> G
                        G --> H[返回给开发者]
                        H --> I[集成到编辑器/终端]
                </div>
                <p class="text-gray-500 text-sm mt-4">图示展示了 Claude Code 如何通过配置的国产 API 处理开发者输入并返回代码建议。</p>
            </div>
        </section>
    </div>

    <script>
        // Show the first API tab by default
        document.addEventListener('DOMContentLoaded', function() {
            mermaid.initialize({startOnLoad:true});
            showApiTab('deepseek');
        });
        
        function showApiTab(tabName) {
            // Hide all tabs
            document.querySelectorAll('.api-tab').forEach(tab => {
                tab.classList.add('hidden');
            });
            
            // Show selected tab
            document.getElementById(tabName + '-tab').classList.remove('hidden');
            
            // Update tab styles
            const tabButtons = document.querySelectorAll('.flex.overflow-x-auto button');
            tabButtons.forEach(button => {
                if (button.textContent.trim().toLowerCase().includes(tabName)) {
                    button.classList.add('border-indigo-500', 'text-indigo-600');
                    button.classList.remove('text-gray-500', 'hover:text-gray-700');
                } else {
                    button.classList.remove('border-indigo-500', 'text-indigo-600');
                    button.classList.add('text-gray-500', 'hover:text-gray-700');
                }
            });
        }
    </script>
</body>
</html>
```